import { type MapFeatures, symbolProperties, lineProperties, fillProperties } from '@/map'
import type { MapFeatureStyles } from '@/map/layer'
import type { Point, LineString, Polygon } from 'geojson'

export interface AuxGraphic {
  type: string
  id: string
  name: string
}

export type AuxGraphicGeometry = Point | LineString | Polygon

export interface AuxGraphicItem {
  graphic: AuxGraphic
  geometry: AuxGraphicGeometry[]
  feature: MapFeatures
}

export const auxGraphicColor = {
  primary: '#FF6666'
}

export const auxGraphicStyle: MapFeatureStyles = {
  symbol: {
    icon: 'dot-9',
    color: auxGraphicColor.primary,
    textOpacity: 1,
    fontScale: 1,
    // textOffset: [0.4, 0.4]
    textOffset: [0, 0]
  },
  line: {
    lineColor: auxGraphicColor.primary,
    lineWidth: 0.7,
    lineOpacity: 1.0
  },
  fill: {
    fillColor: auxGraphicColor.primary,
    fillOpacity: 0.4,
    fillOutlineColor: auxGraphicColor.primary
  }
}

export const auxGraphicProperties = {
  symbol: (txt: string | undefined, icon: string | undefined = undefined) =>
    symbolProperties(txt, auxGraphicStyle.symbol, icon),
  line: lineProperties(auxGraphicStyle.line),
  fill: fillProperties(auxGraphicStyle.fill)
}
